﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>UI Helper Method Tests</title>
		<link href="../Common/Styles/qunit.css" type="text/css" rel="stylesheet" />

		<script src="../Common/Scripts/JQuery/jquery-1.3.2.js" type="text/javascript"></script>
		<script src="../Common/Scripts/QUnit/qunit.js" type="text/javascript"></script>
		<script src="../Common/Scripts/Microsoft/MicrosoftAjax.debug.js" type="text/javascript"></script>
		<script src="../Common/Scripts/Microsoft/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.js" type="text/javascript"></script>
		<script src="../Common/Scripts/QUnit/qunit.ext.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.model.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.mapper.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.view.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.ui.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.mock.js" type="text/javascript"></script>
		<script src="../Common/Scripts/mock-driver.js" type="text/javascript"></script>
		<script type="text/javascript">
			var context = ExoWeb.context({ model: { driver: { id: "1", from: "Driver", and: ["this.Owner.Location.Address.State", "this.Cars", "this.Dealer", "this.Dealer.AvailableCars"]} } });

			setupTest("test1", { description: "Simple Chain Tests", expect: 5 }, function(chain) {
				equals(3, chain.all().length, "Chain is 3-parts (\"Owner.Location.Address\").");
				ok(chain instanceof ExoWeb.Model.PropertyChain, "chain is of type PropertyChain.");

				var addressProp = chain.lastProperty();
				ok(addressProp, "lastProperty() result is defined.");
				ok(addressProp instanceof ExoWeb.Model.Property, "lastProperty() result is of type Property.");
				equals("Address", addressProp.get_name(), "lastProperty() result name is \"Address\".");
			});

			setupTest("test2", { description: "Value Tests", expect: 1 }, function(chain) {
				var address = chain.value(context.model.driver);
				ok(address instanceof LocationAddress, "Value is of type Address.");
			});

			setupTest("test3", { description: "Target Tests", expect: 1 }, function(chain) {
				var loc = chain.lastTarget(context.model.driver);
				ok(loc instanceof OwnerLocation, "Target is an OwnerLocation.");
			});

			setupTest("test4", { description: "Extend Chain Tests", expect: 3 }, function(chain) {
				var address = chain.value(context.model.driver);
				ok(address instanceof LocationAddress, "address is a LocationAddress");

				chain.append(address.meta.type.property("State.Abbreviation"));
				equals(5, chain.all().length, "chain length should be 5 after appending \"State.Abbreviation\".");

				var abbrev = chain.value(context.model.driver);

				equals(String, abbrev.constructor, "Abbreviation should return a string.");
			});

			setupTest("test5", { description: "Equality Tests" }, function(chain) {
				var props = [
					{ label: "Person.$Name", value: Person.$Name },
					{ label: "Driver.$Name", value: Driver.$Name },
					{ label: "Person.meta.property(\"Name\")", value: Person.meta.property("Name") },
					{ label: "Person.meta.property(\"Name\", true)", value: Person.meta.property("Name", true) },
					{ label: "Driver.meta.property(\"Name\")", value: Driver.meta.property("Name") },
					{ label: "Driver.meta.property(\"Name\", true)", value: Driver.meta.property("Name", true) },
					{ label: "ExoWeb.Model.Model.property(\"this.Name\", Person)", value: ExoWeb.Model.Model.property("this.Name", Person) },
					{ label: "ExoWeb.Model.Model.property(\"this.Name\", Driver)", value: ExoWeb.Model.Model.property("this.Name", Driver) }
				];

				Array.forEach(props, function(prop1) {
					Array.forEach(props, function(prop2) {
						ok(prop1.value.equals(prop2.value), "Properties should be equal: " + prop1.label + ", " + prop2.label);
					});

					ok(!prop1.value.equals(Driver.$Owner), "Properties should not be equal: " + prop1.label + ", Driver.$Owner");
					ok(!Driver.$Owner.equals(prop1.value), "Properties should not be equal: Driver.$Owner, " + prop1.label);

					var dealerName = ExoWeb.Model.Model.property("this.Dealer.Name", Driver);
					ok(!prop1.value.equals(dealerName), "Properties should not be equal: " + prop1.label + ", ExoWeb.Model.Model.property(\"this.Dealer.Name\", Driver)");
					ok(!dealerName.equals(prop1.value), "Properties should not be equal: ExoWeb.Model.Model.property(\"this.Dealer.Name\", Driver), " + prop1.label);
				});

				var chain1 = ExoWeb.Model.Model.property("this.Driver.Name", Car);
				var chain2 = ExoWeb.Model.Model.property("this.Driver.Name", NewCar);

				ok(chain1.equals(chain2), "Properties should be equal: ExoWeb.Model.Model.property(\"this.Driver.Name\", Car), ExoWeb.Model.Model.property(\"this.Driver.Name\", NewCar)");
			});

			setupTest("test6", { description: "Property Chain Each Method" }, function() {
				var numEach = 0;

				ExoWeb.Model.Model.property("this.PrimaryCar<UsedCar>.Mileage", Driver.meta)
					.each(context.model.driver, function(obj) { numEach++; }, Driver.$PrimaryCar);
				equals(numEach, 0, "Each should not apply to the driver's car since it is of type NewCar");

				numEach = 0;

				ExoWeb.Model.Model.property("this.PrimaryCar<NewCar>.PlantNumber", Driver.meta)
					.each(context.model.driver, function(obj) { numEach++; }, Driver.$PrimaryCar);
				equals(numEach, 1, "Each should apply to the driver's car since it is of type NewCar");
			});

			setupTest("test7", { description: "Argument Assertions for Property Get and Set" }, function() {
				var errorThrown = false;
				try {
					CarOwner.$Name.value(context.model.driver);
				}
				catch (e) { errorThrown = true; }
				ok(errorThrown, "Should not be able to get value for CarOwner.$Name from a driver, even though it has a \"Name\" property");

				errorThrown = false;
				try {
					CarOwner.$Name.value(context.model.driver, "Test");
				}
				catch (e) { errorThrown = true; }
				ok(errorThrown, "Should not be able to set value for CarOwner.$Name from a driver, even though it has a \"Name\" property");
			});

			setupTest("test8", { description: "Testing toggles via list.length (check in function)", expect: 1 }, function() {
				equals($("#toggleCardDivFunction1").css("display"), "none");
			});

			setupTest("test9", { description: "Testing toggles via list.length property", expect: 1 }, function() {
				equals($("#toggleCardDivProperty1").css("display"), "none");
			});

			timeoutTests(2000);

			context.ready(function() {
				var chain = context.model.driver.meta.type.property("Owner.Location.Address");

				executeTest("test1", chain);
				executeTest("test2", chain);
				executeTest("test3", chain);
				executeTest("test4", chain);
				executeTest("test5", chain);
				executeTest("test6");
			
			});

			function renderComplete() {
				console.log("render complete");
				executeTest("test8");
				executeTest("test9");
				executeTest("test7");
			}
		</script>
	</head>
	<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*" xmlns:toggle="javascript:ExoWeb.UI.Toggle">
		
		<!-- QUnit Display -->
		<h1 id="qunit-header">Test Results:</h1>
		<h2 id="qunit-banner"></h2>
		<h2 id="qunit-userAgent"></h2>
		<ol id="qunit-tests"></ol>

		<div id="driver" class="sys-template" sys:attach="dataview" dataview:data="{~ context.model.driver }" dataview:onrendered="{{ renderComplete }}">
			<h3>{binding Name}</h3>
			<div id="toggleCardDivFunction" sys:attach="toggle" toggle:on="{~ Cars }" toggle:when="{{ function(list) { return list.length === 2; } }}" toggle:action="hide">
				Toggle Driver Cars Function Method:
				<ul class="sys-template" sys:attach="dataview" dataview:data="{~ Cars }" >
					<li>Car: <span>{ binding Name }</span></li>
				</ul>
			</div>

			<div id="toggleCardDivProperty"  sys:attach="toggle" toggle:on="{~ Cars.length}" toggle:when="{{ 2 }}" toggle:action="hide">
				Toggle Driver Cars Property Method:
				<ul class="sys-template" sys:attach="dataview" dataview:data="{~ Cars }" >
					<li>Car: <span>{ binding Name }</span></li>
				</ul>
			</div>
		</div>
	</body>
</html>
